<template>
  <div class="club-content-bg">
    <div class="club-content white-bg">
      <form class="info-form" @submit.prevent="onSubmit">
        <div class="info-item">
          <label for="name">姓名*</label>
          <input class="clear-input" type="text" id="name" placeholder="请输入您的姓名" v-model="formText.name" required>
        </div>
        <div class="info-item flex-btn">
          <label for="phone">电话*</label>
          <input class="clear-input flex-item" type="number" id="phone" placeholder="请输入您的电话号码" v-model="formText.phone" required>
          <button class="code-btn clear-btn" type="button" :disabled="verifing" v-on:click="getCode">{{verifing ? second+'s后重新获取':'获取验证码'}}</button>
        </div>
        <div class="info-item">
          <label for="code">验证码*</label>
          <input class="clear-input" type="text" id="code" placeholder="请输入验证码" v-model="formText.verify_code" required>
        </div>
        <p class="right-txt">*为必填项</p>
        <div class="use-rule">
          <p class="rule-title">使用说明</p>
          <ul class="rule-list">
            <li>1、此卡限非会员使用；</li>
            <li>2、请提前一天向门店预约；</li>
            <li>3、本卡恕不兑换现金或找零；</li>
            <li>4、本卡尊享截止时间：2018年6月1日；</li>
            <li>5、本店保留此卡法律范围内的最终解释权。</li>
          </ul>
        </div>
        <button class="receive-btn clear-btn" type="submit" :disabled="submited" :class="bgColor">{{submited ? '已领取':'领取周卡'}}</button>
        <div class="loading-pop" v-show="isLoad">
          <div class="loading">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </form>
    </div>
    <transition name="fade">
      <div class="card-pop" v-show="cardShow" transition="fade" @click="hideDetail">
        <div class="card-content">
          <img src="../../assets/pop-head.png" class="card-img"/>
          <div class="card-info">
            <p class="card-title">领取成功</p>
            <p class="card-msg">支持{{this.$route.params.clubName}}，记得在过期前去使用哦，详情会通过短信的方式发送给您。</p>
            <div class="confirm-btn" @click="hideDetail">知道了</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'fillinfo',
  data () {
    return {
      cardShow: false,
      formText: {
        club_id: ''
      },
      second: 60,
      verifing: false,
      submited: false,
      isLoad: false
    }
  },
  created () {
    this.formText.club_id = this.$route.params.clubId
  },
  computed: {
    bgColor () {
      return this.submited ? 'light-pink' : ''
    }
  },
  methods: {
    hideDetail () {
      this.cardShow = false
    },
    onSubmit: function () {
      let formData = this.formText
      this.isLoad = true
      this.$http.post(`${process.env.API}/common/mengniu`, formData,
      {'headers': {'Accept': 'application/vnd.sci.v2+json'}}).then((response) => {
        this.cardShow = true
        this.submited = true
        this.isLoad = false
      })
      .catch(function (response) {
        this.submited = false
        this.isLoad = false
        alert('领取失败')
      })
    },
    getCode () {
      if (!this.formText.phone) {
        alert('号码不能为空')
        return
      }
      this.verifing = true
      this.countdown()
      this.$http.post(`${process.env.API}/common/code`,
      {phone: this.formText.phone},
      {'headers': {'Accept': 'application/vnd.sci.v2+json'}}).then((response) => {
        alert('验证码已发送')
      }, (response) => {
        alert('发送失败')
        this.verifing = false
        this.second = 60
        clearTimeout(this.timer)
      })
    },
    countdown () {
      if (this.second === 0) {
        this.second = 60
        this.verifing = false
      } else {
        this.timer = setTimeout(() => {
          this.second--
          this.countdown()
        }, 1000)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
@import "../../common/stylus/mixin.styl";
@import "../../common/stylus/base.styl";
$blackFont = #333333
$garyFont = #6d6d6d

.club-content-bg
  width: 100%;
  .white-bg
    background rgba(255,255,255,.7)
    .info-form
      padding 30px 15px
      & label
        color $blackFont
        font-size 0.875rem
        width 60px
      & input::-webkit-input-placeholder
        color $garyFont
        font-size 0.75rem
      .info-item
        display flex
        height h = 50px
        line-height h
        border-1px(#a8abad)
        .code-btn
          color $blackFont
          font-size 0.75rem
          border 1px solid #a8abad
          background none
          padding 4px 8px
          border-radius 5px
          align-self center
      .light-pink
        background #f7cfd5
      .flex-btn
        justify-content space-between
        .flex-item
          flex 1
      .right-txt
        text-align right 
        color $mainColor
        line-height 2.5
        font-size 0.75rem
      .use-rule
        padding 25px
        .rule-title
          color $blackFont
          font-size 0.875rem
          text-align center
          height 40px
        .rule-list
          color $garyFont
          font-size 0.75rem
          line-height 1.6
.card-pop
  position fixed
  z-index 100
  top 0
  left 0
  width 100%
  height 100%
  overflow auto
  background rgba(0,0,0,0.6)
  opacity 1
  &.fade-enter-active, &.fade-leave-active
    transition all 0.5s ease
  &.fade-enter, &.fade-leave-active
    opacity 0
    background rgba(0,0,0,0)
  .card-content
    position absolute
    top 18%
    left 50%
    width w = 77%
    margin-left -(w/2)
    font-size 0
    .card-img
      width 100%
    .card-info
      background #fff
      padding 10px 40px
      border-radius 0 0 5px 5px
      .card-title
        color $blackFont
        font-size 1.2rem
        text-align center
        line-height 2
        font-weight bold
      .card-msg
        color $garyFont
        font-size 0.875rem
        line-height 1.5
      .confirm-btn
        width 115px
        height h=30px
        line-height h
        margin 15px auto 0 auto
        color #fff
        background $mainColor
        font-size 1rem
        text-align center
        border-radius 4px
</style>
